//_______________________________________________________________________
//-----------------------色彩------------------------------
$main-color: black;
// 随着主题变化的文字颜色
$font-color-main: #ccc;
$active-color: #17bd2b;
$catalog-active-color: #e32020;
$base-color: #303030;
$light-rate: 40%;
$base-color-light: lighten($base-color, $light-rate);
$base-color-dark: darken($base-color, $light-rate);
//_______________________________________________________________________
//-----------------------文字-----------------------------
$font-family: Verdana,
Arial,
Helvetica,
sans-serif;
$font-color-base: $base-color;
$line-style: 1px solid #ccc;
// 基础字体大小
$font-size-base: 16px;
// 字体比例
$font-rate: 1.16;
$font-size-sm: round($font-size-base / $font-rate);
$font-size-xs: round($font-size-sm / $font-rate);
$font-size-l5: $font-size-base;
$font-size-l4: round($font-size-base * $font-rate);
$font-size-l3: round($font-size-l4 * $font-rate);
$font-size-l2: round($font-size-l3 * $font-rate);
$font-size-l1: round($font-size-l2 * $font-rate);
//_______________________________________________________________________
//-----------------------布局------------------------------
// 头部的高度
$header-height:60px;
// 元素块之间的间隔
$separation:10px;
$icon-url: url('../../img/icon/github_icon_1.jpg');
$catolog-width:220px;
$catalog-bgcolor:rgba(0,
0,
0,
.8);
// 文字溢出隐藏
%fontOver {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//_______________________________________________________________________
//-----------------------rem------------------------------
$html-font-size: 100px;
@function pxTOrem ($px) {
  @return $px / $html-font-size * 1rem
}

$phone-rate: .85; // 移动端尺寸相对于桌面端 比例
$font-size-base-rem: pxTOrem($font-size-base * $phone-rate);
$font-size-sm-rem: $font-size-base-rem / $font-rate;
$font-size-xs-rem: $font-size-sm-rem / $font-rate;
$font-size-l5-rem: $font-size-base-rem;
$font-size-l4-rem: $font-size-base-rem * $font-rate;
$font-size-l3-rem: $font-size-l4-rem * $font-rate;
$font-size-l2-rem: $font-size-l3-rem * $font-rate;
$font-size-l1-rem: $font-size-l2-rem * $font-rate;
// --布局 rem ----
$header-height-rem:pxTOrem($header-height * $phone-rate);
$separation-rem: pxTOrem($separation * $phone-rate);
$catolog-width-rem: pxTOrem($catolog-width * $phone-rate);
